<template>
	<view>
		
		<z-nav-bar :bgColor="['#3699ff', '#0075ee']" bgColorAngle="90" fontColor="#FFF" homeState="2000"
			backState="1000">
			<view class="title-box">
				<text>订单分配</text>
			</view>
		</z-nav-bar>
		
		<u-sticky :offsetTop="offsetTop">
			<view class="searchBox">
				<view style="display: flex;" v-if="order.salesman"><text class="city">当前业务员:{{order.salesman}}</text></view>

				<view class="search">
					<u--input :value="nickName" clearable border="none" fontSize="12" placeholder="请输入人员名称搜索" @blur="isSearch = false" @focus="isSearch = true" @change="searchChange" prefixIcon="search"
							prefixIconStyle="font-size: 22px;color: #909399"/>
				</view>
			</view>
			<view class="salemanBox">
			<!-- 	<view class="flex-row-center-sb">
					<view>当前发车员:{{orderPerson.departureAttendant|filterNull}}</view>
					<view>当前收车员:{{orderPerson.vehicleCollector|filterNull}}</view>
				</view> -->
				<view>当前发车员:{{orderPerson.departureAttendant|filterNull}}</view>
				<view>当前收车员:{{orderPerson.vehicleCollector|filterNull}}</view>
				<view>当前负责人:{{orderPerson.headName|filterNull}}</view>
				
			</view>
		</u-sticky>

		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="listContainer">
				<view class="listTitle">人员列表</view>
				<u-radio-group v-model="checkedUserId">
					<view class="listItem" v-for="(item, index) in staffList" :key="item.userId">
						<!-- <view style="display: inline-block;position: absolute;top: 10rpx; right: 28rpx;"><u-radio active-color="#1673FF" :name="item.userId"></u-radio></view> -->

						<view class="text-line">
							<text class="title">所属部门:</text>
							<text class="value">{{ item.deptName | filterNull }}</text>
						</view>

						<view class="text-line">
							<text class="title">人员角色:</text>
							<text class="value">{{ item.roleName | filterNull }}</text>
						</view>

						<view class="text-line">
							<text class="title">人员姓名:</text>
							<text class="value">{{ item.nickName | filterNull }}</text>
						</view>

						<view class="text-line">
							<text class="title">联系电话:</text>
							<text class="value">{{ item.phone | filterNull }}</text>
						</view>

						<view class="text-line">
							<text class="title">当前订单数:</text>
							<text class="value">{{ item.orderNumber | filterNull }}</text>
						</view>
						
						
						<view class="flex-row-center-sb setPersonBox">
							<text v-if="order.orderStatus < 4"  class="btn" @click.stop="setPerson(1,item)">设为发车员</text>
							<text class="btn"  @click.stop="setPerson(2,item)">设为收车员</text>
							<text class="btn" @click.stop="setPerson(0,item)">设为负责人</text>
						</view>
						
					</view>
				</u-radio-group>
			</view>
		</mescroll-body>

		<!-- <button type="info" class="sub-btn" @click="distribution">确定分配</button> -->
	</view>
</template>

<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import * as api from '@/api/order-api.js';
import orderInfo from './component/orderInfo.vue';
export default {
	components: {
		orderInfo
	},
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			offsetTop: 0,
			order: {},
			nickName: '',
			isSearch: false,
			staffList: [],
			checkedUserId: '',
			checkedUserName: '',
			
			takePerson:null,
			returnPerson:null,
			headPerson:null,
			orderPerson:{departureAttendant:'',vehicleCollector:'',headName:''}
		};
	},
	onLoad: function(option) {
		//获取手机状态栏高度
		this.offsetTop = uni.getSystemInfoSync()['statusBarHeight'] + (92 / 750 * uni.getSystemInfoSync()
			.windowWidth) - 0.5;
		const item = JSON.parse(decodeURIComponent(option.item));
		this.order = item;
		console.log('订单信息', this.order);
		this.getSalesman();
	},
	methods: {
		//获取当前分配的业务员
		getSalesman(){
			let param = {
				orderNo: this.order.orderNo
			};
			api.getSalesman(this.toParams(param)).then(res=>{
				this.orderPerson = res.data;
				// this.takePerson = res.data.departureAttendant;
				// this.returnPerson = res.data.vehicleCollector;
				
			})
		},
		setPerson(type, item){
			let param = {
				orderNo: this.order.orderNo,
				userId : item.userId,
				nickName : item.nickName,
				type: type
			};
			api.distribution(param).then(res=>{
				if(res.code == 200) {
					uni.$u.toast('设置成功');
					uni.$emit('refreshOrder');
					this.getSalesman();
				}
			})
			
		},
		
		//获取员工列表
		upCallback(page) {
			var param = {
				orderNo: this.order.orderNo,
				reserveTakeStoreId: this.order.reserveTakeStoreId,
				reserveAlsoStoreId:this.order.reserveAlsoStoreId,
				nickName: this.nickName,
				pageNum: page.num,
				pageSize: page.size
			};
			api
				.geUserlist(this.toParams(param))
				.then(res => {
					//设置列表数据
					if (page.num == 1) this.staffList = []; //如果是第一页需手动制空列表
					this.staffList = this.staffList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				})
				.catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		},
		//搜索
		searchChange(value) {
			this.nickName = value;
			this.mescroll.triggerDownScroll();
		},
		checkedUser(userId, nickName) {
			this.checkedUserId = userId;
			this.checkedUserName = nickName;
		},
		distribution() {
			uni.showLoading({
				title: '提交中...',
				mask: true
			});
			api
				.distribution({
					orderNo: this.order.orderNo,
					userId: this.checkedUserId
				})
				.then(res => {
					uni.hideLoading();
					this.$u.toast('分配成功');
					uni.$emit('refreshOrder');
					uni.navigateBack({
						animationDuration: 300
					});
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.searchBox {
	padding: 20upx;
	display: flex;
	align-items: center;
	// background-color: #fff;
	background: linear-gradient(90deg, #3599FF 0%, #0275ED 100%);

	.city {
		font-size: 30upx;
		font-weight: bold;
		color: #fff;
	}

	.search {
		flex: 1;
		padding: 0 20upx;
		margin: 0 20upx;
		height: 60upx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24upx;
		background-color: #ffffff;
		border-radius: 30rpx;
	}
}

.salemanBox {
	flex: 2;
	padding: 20rpx 40rpx;
	color: #2879FF;
	font-size: 28rpx;
	background-color: #F5F5F5;
}
.setPersonBox {
	padding: 20rpx;
	.btn{
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #1673FF;
		border-radius: 30rpx;
		color: #fff;
		font-size: 26rpx;
		text-align: center;
	}
}


/deep/ .u-radio-group--row {
	display: inline !important;
}

/deep/ .u-radio {
	flex-direction: row-reverse !important;
}

.listContainer {
	margin: 20rpx;
	margin-bottom: 50rpx;
	background: #ffffff;
	border-radius: 16px;
	padding: 24rpx 0;
	.listTitle {
		margin-left: 24rpx;
		color: #1673ff;
		font-size: 28rpx;
	}
	.listItem {
		position: relative;
		background: #ffffff;
		box-shadow: 0px 4rpx 16rpx 0px rgba(1, 10, 18, 0.1);
		border-radius: 8rpx;
		margin: 32rpx 24rpx;
		box-sizing: border-box;
		padding: 10rpx 0;
		.text-line {
			padding: 5rpx 0;
			font-size: 28rpx;
			.title {
				color: #666666;
				margin-right: 10rpx;
			}
			.value {
				color: #333333;
			}
		}
	}
}
</style>
